<template>
  <el-row>
    <!-- 左侧导航栏 -->
    <el-col style="position:fixed;width:200px;padding:18px 10px 10px 10px">
      <el-steps direction="vertical" :active="idList.length" style="text-align:left">
        <span style="font-weight:bold;color:#409EFF">导航栏</span>
        <br />
        <span
          v-for="(item,index) in idList"
          :key="item.id+item.label"
          style="text-align:left"
          @click="stepClick(item,index)"
        >
          <el-step :title="item.label" />
          <div
            v-if="index+1 != idList.length"
            style="width:13px;height:66px;border-right:2px solid #409EFF"
          ></div>
        </span>
      </el-steps>
    </el-col>

    <!-- 右侧数据展示表单 -->
    <el-col style="padding-left:210px">
      <el-card class="box-card">
        <!-- 基本信息 -->
        <div>
          <span id="base" class="first-title">基本信息</span>
          <br />
          <el-form
            class="first"
            :model="baseData"
            inline
            label-width="60%"
            label-suffix="："
            size="medium"
          >
            <WellDataRow
              data1="国别"
              :data2="baseData.COUNTRY"
              data3="井名"
              :data4="baseData.WELLNAME"
            />
            <WellDataRow data1="区域" :data2="baseData.AREA" data3="井型" :data4="baseData.WELLTYPE" />
            <WellDataRow
              data1="区块"
              :data2="baseData.BLOCK"
              data3="井别"
              :data4="baseData.WELLSPACING"
            />
            <WellDataRow data1="油田" :data2="baseData.OILFIELD" :last="last" />
          </el-form>
          <el-divider />
        </div>

        <!-- 套管尺寸-详细数据 -->
        <div v-if="formData.length==0">暂无套管尺寸详细数据</div>
        <div v-else v-for="item in formData" :key="`${item.wellName}~${item.casingSize}`">
          <span
            :id="`${item.wellName}~${item.casingSize}`"
            class="first-title"
          >套管尺寸:{{item.casingSize}}</span>
          <br />
          <el-form :model="item" inline label-width="60%" size="medium">
            <!-- 基本信息+泥浆性能+固井前循环参数 -->
            <div class="first">
              <WellDataRow title1="基本信息" title2="泥浆性能" istitle="1"/>
              <WellDataRow data1="井眼直径(in)" :data2="item.holeSize" data3="泥浆类型" :data4="item.mudType" />
              <WellDataRow data1="实际井深(m)" :data2="item.actualWellDepth" data3="泥浆密度(g/cm3)" :data4="item.mudDensity" />
              <WellDataRow data1="套管外径(in)" :data2="item.casingSize" data3="漏斗粘度(秒/夸脱)" :data4="item.fv" />
              <WellDataRow data1="套管实际下深(m)" :data2="item.casingBtmDepth" data3="屈服值PV(Pa或CP)" :data4="item.pv" />
              <WellDataRow data1="设计水泥浆返高(m)" :data2="item.returnDepth1" data3="塑性粘度YP(mPa.s或lbs/100ft2)" :data4="item.yp" />
              <WellDataRow data1="管内水泥塞长度(m)" :data2="item.cementPlug" data3="切力(Pa或CP)" :data4="item.cp" />
              <WellDataRow data1="设计裸眼附加量(％)：" :data2="item.additiveVolume1" title2="固井前循环参数"  istitle="2" />
              <WellDataRow data1="实测水泥浆返高(m)" :data2="item.returnDepth2" data3="循环排量(L/Min)" :data4="item.cycleDisplacement" />
              <WellDataRow data1="实探水泥塞顶深(m)" :data2="item.plugTopDepth" data3="循环泵压(Psi)" :data4="item.cyclePump" />
              <WellDataRow data1="实际裸眼附加量(％)" :data2="item.additiveVolume2" data3="裸眼环空返速(m/s)" :data4="item.av" />
              <WellDataRow data1="固井方式" :data2="item.cementType" :last="last" />
            </div>
            <br />

            <!-- 施工配方和性能 -->
            <div class="second">
              <WellDataRow title3="施工配方和性能" istitle="3" />
              <WellDataRow data1="项目" data2="首浆"  data3="中间浆" data4="尾浆" />
              <WellDataRow data1="水泥浆类型" :data2="item.sluryType1"  :data3="item.sluryType2" :data4="item.sluryType3" />
              <WellDataRow data1="施工配方" :data2="item.fourmula1"  :data3="item.fourmula2" :data4="item.fourmula3" />
              <WellDataRow data1="试验温度BHST/BHCT(℃)" :data2="item.bhstct1"  :data3="item.bhstct2" :data4="item.bhstct3" />
              <WellDataRow data1="密度(g/cm3)" :data2="item.sluryDensity1"  :data3="item.sluryDensity2" :data4="item.sluryDensity3" />
              <WellDataRow data1="造浆率(cuft/sk)" :data2="item.pulpingRate1"  :data3="item.pulpingRate2" :data4="item.pulpingRate3" />
              <WellDataRow data1="混合水率(gal/sk)" :data2="item.mixedWaterRate1"  :data3="item.mixedWaterRate2" :data4="item.mixedWaterRate3" />
              <WellDataRow data1="失水量(ml/7Mpa.30min)" :data2="item.lostWater1"  :data3="item.lostWater2" :data4="item.lostWater3" />
              <WellDataRow data1="自由水(％)" :data2="item.freeWater1"  :data3="item.freeWater2" :data4="item.freeWater3" />
              <WellDataRow data1="抗压强度(MPa/Psi)" :data2="item.compressiveStrength1"  :data3="item.compressiveStrength2" :data4="item.compressiveStrength3" />
              <WellDataRow data1="稠化时间(hr:min)" :data2="item.thickeningTime1"  :data3="item.thickeningTime2" :data4="item.thickeningTime3" />
              <WellDataRow data1="可泵时间(hr:min)" :data2="item.pumpTime1"  :data3="item.pumpTime2" :data4="item.pumpTime3" :last="last" />
            </div>
            <br />

            <!-- 作业数据 -->
            <div class="second">
              <WellDataRow title3="作业数据" istitle="3" />
              <WellDataRow data1="项目" data2="首浆"  data3="中间浆" data4="尾浆" />
              <WellDataRow data1="水泥浆体积(bbls)" :data2="item.sluryVol1"  :data3="item.sluryVol2" :data4="item.sluryVol3" />
              <WellDataRow data1="干水泥用量(ton)" :data2="item.dryCementVol1"  :data3="item.dryCementVol2" :data4="item.dryCementVol3" />
              <WellDataRow data1="混合水用量(m3)" :data2="item.mixWaterVol1"  :data3="item.mixWaterVol2" :data4="item.mixWaterVol3" />
              <WellDataRow data1="水泥浆最高密度(g/cm3)" :data2="item.sluryMaxDensity1"  :data3="item.sluryMaxDensity2" :data4="item.sluryMaxDensity3" />
              <WellDataRow data1="水泥浆最低密度(g/cm3)" :data2="item.sluryMinDensity1"  :data3="item.sluryMinDensity2" :data4="item.sluryMinDensity3" />
              <WellDataRow data1="水泥浆平均密度(g/cm3)" :data2="item.sluryAvgDensity1"  :data3="item.sluryAvgDensity2" :data4="item.sluryAvgDensity3" />
              <WellDataRow data1="替浆量(bbl)" :data2="item.replaceVol1"  :data3="item.replaceVol2" :data4="item.replaceVol3" />
              <WellDataRow data1="替浆速度(bbl/min)" :data2="item.replaceSpeed1"  :data3="item.replaceSpeed2" :data4="item.replaceSpeed3" />
              <WellDataRow data1="碰压前最高顶替压力(MPa/Psi)" :data2="item.maxDisplacement1"  :data3="item.maxDisplacement2" :data4="item.maxDisplacement3" />
              <WellDataRow data1="施工总耗时(固井管线试压开始至作业结束)(min)" :data2="item.workTime1"  :data3="item.workTime2" :data4="item.workTime3" />
              <WellDataRow data1="施工人员" :data2="item.workMan1"  :data3="item.workMan2" :data4="item.workMan3" />
              <WellDataRow data1="施工日期" :data2="item.workDate1"  :data3="item.workDate2" :data4="item.workDate3" :last="last" />
            </div>
            <br />

            <!-- 前置液 -->
            <div class="second">
              <WellDataRow title3="前置液" istitle="3" />
              <WellDataRow data1="前置液" data2="组成及性能"  data3="密度(g/cm3)" data4="用量(BBL)" />
              <WellDataRow data1="清洗液" :data2="item.cleaningFluidFormula"  :data3="item.cleaningFluidDensity" :data4="item.cleaningFluidVol" />
              <WellDataRow data1="隔离液" :data2="item.spacerFluidFormula"  :data3="item.spacerFluidDensity" :data4="item.spacerFluidVol" :last="last" />
            </div>
          </el-form>
          <el-divider />
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { Divider, Steps, Step } from 'element-ui'
import { getWellDetailData } from '../../../api/module/dataquery.js'
import WellDataRow from './components/WellDataRow'

export default {
  components: {
    elDivider: Divider,
    elSteps: Steps,
    elStep: Step,
    WellDataRow
  },
  filters: {
    dataFilter(v) {
      if (v) {
        return v
      }
      return '无'
    }
  },
  data() {
    return {
      formData: [],
      baseData: {},
      idList: [{ id: 'base', label: '基本信息' }],
      form: {},
      pager: {},
      last: true,
    }
  },
  created() {
    this.baseData = this.$route.params.data
    this.form = this.$route.params.filterForm
    this.pager = this.$route.params.pager
    this.getData(this.baseData.WELLNAME)
  },
  mounted() {},
  methods: {
    getData(wellName) {
      getWellDetailData(wellName)
        .then(res => {
          this.formData = res.data.data
          this.getIdList(this.formData)
        })
        .catch(err => {
          this.$message.error('查询失败，请返回重新查询！')
        })
    },
    getIdList(data) {
      if (data.length > 0) {
        data.forEach(item => {
          this.idList.push({
            id: `${item.wellName}~${item.casingSize}`,
            label: '套管尺寸:' + item.casingSize
          })
        })
      }
      this.idList.push({
        id: `wellQuery`,
        label: '返回前一页'
      })
    },
    stepClick(data, index) {
      if (index === this.idList.length - 1) {
        this.$router.push({
          name: data.id,
          params: { filterForm: this.form, pager: this.pager }
        })
      } else {
        document.getElementById(data.id).scrollIntoView(true)
      }
    }
  }
}
</script>

<style scoped>
.first >>>.el-form-item {
  margin: 0px 5px 0px 0px;
  width: 100%;
  font-size: 30px;
  text-align: center;
}
.second >>>.el-form-item {
  margin: 0px 5px 0px 0px;
  width: 100%;
  font-size: 30px;
  text-align: center;
}
.first-title {
  font-size: 25px ;
  font-weight: 700;
}
</style>
